<template>
  <div>
    hello world--{{ myName }}
    <input type="text" v-model="myText" v-focus>
    <button @click="handleAdd">Add</button>
    <ul>
      <li v-for="data in datalist" :key="data">
        {{ data }}
      </li>
    </ul>

    <navbar myTitle="home" :rightShow="false">
      <div>11111111111</div>
    </navbar>

    <bntShow>
      <template #show>
        <button @click="handleShowparent">show</button>
      </template>
    </bntShow>

    <!--    <transition name="isShow">-->    <!-- transition放到组件里面一样可以实现效果，而且提高了可复用性 -->
    <sidebar v-show="isShow" mode="right"></sidebar>
    <!--    </transition>-->

    <img src="/demo.png" alt="">

    <img :src="imgUrl | imgFilter" alt="">   <!--  验证过滤器  -->
  </div>
</template>
<script>
// ES6 的导出规范 -- babel(ES6->ES5)

// @ ==> src 的绝对路径，由webpack 配置的别名
import navbar from '@/components/Navbar' // 引入组件
import bntShow from './components/BtnShow'
import sidebar from './components/Sidebar'

import Vue from "vue";   //在哪用在哪引
// Vue.component("navbar",navbar)   //还需进行全局或者局部 注册  (此处是全局)

// 指令
Vue.directive("focus",{
  inserted(el){
    el.focus()
  }
})

// 过滤器
Vue.filter("imgFilter",(url)=>{
  return url.replace('w.h/', '') + '@1l_1e_1c_120w_180h'
})

export default {
  data () {
    return {
      myText: '',
      myName: '最爱吃兽奶',
      datalist: [],
      isShow: false,
      imgUrl:'http://p0.meituan.net/w.h/movie/3821a620dbd376a62a999a75a2b3b8f01594170.jpg',
    }
  },
  // 局部注册
  components: {
    // navbar:navbar
    navbar, // 注册和引用的相同可以简写
    bntShow,
    sidebar
  },
  methods: {
    handleAdd () {
      this.datalist.push(this.myText)
      console.log(this.myText)
      this.myText = ''
    },
    handleShowparent () {
      console.log()
      this.isShow = !this.isShow
    }
  }
}
</script>
<style lang="scss" scoped>   /* scoped:使其具有唯一属性，使本组件样式不会影响到其他组件样式 */
$width: 300px;
ul {
  li {
    background-color: orange;
    width: $width;
  }
}
</style>
<!--<style>-->
<!-- ul li{-->
<!--   list-style: none;-->
<!--   background-color: skyblue;-->
<!-- }-->
<!--</style>-->
